<template>
  <div>
    <!--    分页-->
    <el-pagination
      :current-page.sync="pageNumData"
      :layout="layout"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      :total="total"
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>

    <!--    :current-page.sync="pageNumData"  //前往第几页 的默认值 -->
    <!--    :layout="layout"  组件布局-->
    <!--    :page-size="pageSize" //一页，几条数据-->
    <!--    :page-sizes="pageSizes"  //每页条数配置项-->
    <!--    :total="total"  //总数据量-->
    <!--    class="pagination"-->
    <!--    @size-change="handleSizeChange"  每页条数-->
    <!--    @current-change="handleCurrentChange"  每页条数-->
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      pageNumData: this.pageNum, //这个的原因是 这个页面对于element是父组件
      // current-page通过.sync和element（子组件）双向绑定，
      // 但是这个页面相当于pageOne（下次别取这么low的名字）的子组件
      // 是不能直接修改父组件的值所以需要在这里转换
    };
  },
  props: {
    layout: {
      type: String, //类型
      default: "total, sizes, prev, pager, next, jumper", //默认值
    }, //功能配置项
    pageNum: {
      type: Number,
      default: 1,
    }, //当前页
    pageSize: {
      type: Number,
      default: 10,
    }, //每页显示数量
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30],
    }, //每页数量配置项
    total: {
      type: Number,
      default: 0,
    }, //总数据量
  },

  components: {},
  created() {},
  methods: {
    //$emit  父子组件数据双向绑定 父组件可以通过.sync接收
    //方法
    handleSizeChange(e) {
      // this.$emit("SizeChange", e)
      this.$emit("update:pageSize", e); //update: 固定属性写法 让父子组件实现数据响应
      //这样父组件就不用在写这个事件
      this.$emit("change"); //change监听 父子组件直接的数据响应 $set监听VUE页面的响应
    },
    //切换每页条数的监听
    handleCurrentChange(e) {
      this.$emit("update:pageNum", e);
      this.$emit("change");
    },
  },
  mounted() {
    //挂载
  },
};
</script>

<style lang='scss' scoped></style>